<template>
  <BasicModal
    destroyOnClose
    v-bind="$attrs"
    width="60%"
    @register="registerModal"
    :title="getTitle"
  >
    <HEditTable class="!mx-auto" :showAllEdit="true" :columns="ruleColumns" v-model:data="rawData">
      <template #title>
        <div class="mb-2">
          <a-button type="primary" class="ml-2" @click="handleAdd">新增</a-button>
          <a-button class="ml-2" @click="handleDelBatch">删除</a-button>
        </div>
      </template>
      <template #action="{ index }">
        <a-button type="link" class="!mx-1 !px-0" @click.stop="handleDel(index)">删除 </a-button>
      </template>
    </HEditTable>

    <template #footer>
      <Spin :spinning="loading" :delay="200">
        <a-button @click="handleSubmit" type="primary">保存</a-button>
        <a-button @click="handleClose">取消</a-button>
      </Spin>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';

  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { HEditTable } from '/@/components/HEditTable';

  import { Spin } from 'ant-design-vue';

  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import { ruleColumns } from '../config/formItemPropsConfig';

  import { useMessage } from '/@/hooks/web/useMessage';
  // import { isObject } from '/@/utils/is'; // EditColumn

  export default defineComponent({
    name: 'UploadConfigModal',
    components: { Spin, BasicModal, HEditTable },
    props: {
      isCustom: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['success', 'register'],
    setup() {
      const { createMessage } = useMessage();

      const loading = ref(false);
      const { formConfig } = useFormDesignState();
      const rawData = ref<Indexable[]>([]);
      const [registerModal, { setModalProps, closeModal, changeLoading }] = useModalInner(
        async () => {
          rawData.value = formConfig.value.currentItem?.rules || [];
        },
      );

      const getTitle = computed(() => '规则配置');

      async function handleSubmit() {
        try {
          loading.value = true;
          changeLoading(true);
          setModalProps({ confirmLoading: true });
          formConfig.value.currentItem!.rules = rawData.value;
          handleClose();
        } finally {
          loading.value = false;
          changeLoading(false);
          setModalProps({ confirmLoading: false });
        }
      }

      async function handleClose() {
        closeModal();
      }
      async function handleAdd() {
        rawData.value.push({
          required: false,
          trigger: ['blur'],
        });
      }
      const handleDelBatch = () => {
        const arr = rawData.value || [];
        const data = arr.filter((el) => el.check);
        if (!data.length) {
          createMessage.warn('请先选择要删除的列', 0.8);
          return;
        }

        rawData.value = arr.filter((el) => !el.check);
      };
      const handleDel = (index) => {
        rawData.value.splice(index, 1);
      };
      return {
        loading,
        getTitle,
        rawData,
        ruleColumns,
        registerModal,
        handleSubmit,
        handleClose,
        handleAdd,
        handleDelBatch,
        handleDel,
      };
    },
  });
</script>
